<template>
    <div>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="add" type="primary">+ 添加助教老师</el-button>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table :data="useractivity" border height="65vh" style="width: 100%">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="qrcode" label="二维码">
                        <template #default="scope">
                            <el-image :src="scope.row.qrcode" class="avatar" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="info" label="简介 "></el-table-column>
                    <el-table-column prop="description" label="介绍 "></el-table-column>
                    <el-table-column prop="updatedAt" label="删除">
                        <template #default="scope">
                            <el-button type="warning" @click="update(scope.row)">修改</el-button>
                            <el-button type="danger" @click="del(scope.row.ID)" v-if="scope.row.ID !== 1">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog v-model="dialogVisible" title="助教老师设置" width="800px">
            <el-form :model="form" label-width="120px">
                <el-form-item label="名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="助教老师二维码">
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                        :http-request="request" :limit="1" @remove="e => form.qrcode = ''">
                        <el-image v-if="form.qrcode" :src="form.qrcode" class="avatar" />
                        <el-icon size="40" v-else class="avatar">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="form.info" />
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="form.description" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, UploadRequestHandler } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { Iobj, asyncdelcustomerservice, asyncgetcustomerservice, asyncupdatecustomerservice } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import updateoss from '../../../util/updateoss';

const useractivity = ref<Studycodemodel.Icustomerservice[]>([])


const dialogVisible = ref(false)

const formdata = reactive<Iobj<Studycodemodel.Icustomerservice>>({
})

const form = ref<Studycodemodel.Icustomerservice>({

})

onMounted(() => {
    start()
})

function add() {
    dialogVisible.value = true
    form.value = {}

}

const request: UploadRequestHandler = async (file) => {
    const { size } = file.file;
    if (size > 1024 * 1024 * 1024) {
        ElMessage.error("上传文件过大，最大只能上传1024MB");
        return;
    }

    const data = await updateoss([file.file])
    form.value.qrcode = data.url
    return data.url

}

async function start() {
    const data = await asyncgetcustomerservice(formdata)
    useractivity.value = data

}

async function update(body: Studycodemodel.Icustomerservice) {
    form.value = body
    dialogVisible.value = true
}


async function submit() {
    if (!form.value.name) {
        ElMessage.error('名称必须填')
        return
    }
    if (!form.value.qrcode) {
        ElMessage.error('二维码必须填')
        return
    }
    await asyncupdatecustomerservice(form.value)
        .then(e => {
            ElMessage.success('保存成功')
            dialogVisible.value = false
            start()
        }).catch(f => {
            ElMessage.error('保存失败')
        })

}


function del(ID: number) {
    try {
        ElMessageBox.confirm("确定要删除, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
                await asyncdelcustomerservice({ ID });
                ElMessage({
                    type: "success",
                    message: "删除成功!",
                });
                start();
            })
            .catch(() => {
                ElMessage({
                    type: "info",
                    message: "已取消删除",
                });
            });
    } catch (e: any) {
        ElMessage({
            message: "删除失败" + e,
            type: "error",
        });
    }
}

</script>

<style scoped>
.avatar {
    width: 80px;
    height: 80px;
}
</style>